<template>
    <div class="movie">
        <myhead title="电影"  > </myhead>
        <div class="banner">
             <van-swipe 
                :autoplay="3000" 
                indicator-color="white">
                <van-swipe-item v-for="(l,i) in banner" :key="i">
                    <van-image :src="l.poster" class="m-img"></van-image>
                </van-swipe-item>
            </van-swipe>
            <p v-if="city" class="cityinfo van-ellipsis" @click="gotocity()">
                <span>{{city.name}}</span>
                <van-icon name="arrow-down" />
            </p>
        </div>
        <van-tabs v-model="type" sticky >
             <van-tab title="正在热映" :name="1" >
                 <LoadMore :refreshData="refreshData" :listAdd="listAdd" >
                     <mList :films="list"></mList>
                 </LoadMore>
             </van-tab>
             <van-tab title="即将上映" :name="2">
                 <LoadMore :refreshData="refreshData" :listAdd="listAdd" >
                     <mList :films="list"></mList>
                 </LoadMore>
             </van-tab>
        </van-tabs>
    </div>
</template>


<script>
import {Dialog} from "vant"
export default {
    name:"movie",
    data(){
        return {
            list:[],
            pageNum:1,
            pageSize:10 ,
            type:1,
            banner:[],
            total:0,
        }
    },
    watch:{
        type(v){
            this.pageNum = 1;
            this.$ajax.getmaizuo({
                cityId:this.city.cityId,
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                type:v
            },{
                'X-Host': 'mall.film-ticket.film.list'  // cors 
            })
            .then(res=>{
                this.$nextTick(()=>{
                    this.list = res.data.data.films
                    this.total = res.data.data.total
                })
            })
        }
    },
    methods:{
        listAdd(callback,nodata){
            this.pageNum++
            if(this.pageNum>Math.ceil(this.total/this.pageSize)){
                nodata()
            }else{  
                this.$ajax.getmaizuo({
                    cityId:this.city.cityId,
                    pageNum:this.pageNum,
                    pageSize:this.pageSize,
                    type:this.type
                },{
                    'X-Host': 'mall.film-ticket.film.list'  // cors 
                })
                .then(res=>{
                    this.$nextTick(()=>{
                        this.list = this.list.concat(res.data.data.films)
                        this.total = res.data.data.total
                    })
                    callback()
                })
            }
        },
        refreshData(callback){
            this.$ajax.getmaizuo({
                cityId:this.city.cityId,
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                type:this.type
            },{
                'X-Host': 'mall.film-ticket.film.list'  // cors 
            })
            .then(res=>{
                this.$nextTick(()=>{
                    this.list = res.data.data.films
                    this.total = res.data.data.total
                })
                callback()
            })
        },  
        gotocity(){
            this.$router.push({name:"city",query:{city:this.city.name}})
        }
    },
    mounted(){
        
        if(this.city){
            this.$ajax.getmaizuo({
                cityId:this.city.cityId,
                pageNum:this.pageNum,
                pageSize:this.pageSize,
                type:this.type
            },{
                'X-Host': 'mall.film-ticket.film.list'  // cors 
            })
            .then(res=>{
                // 延迟执行  setTimeout 
                // 在下次 DOM 更新循环结束之后执行延迟回调
                this.$nextTick(()=>{
                    this.banner = res.data.data.films.slice(0,4)
                    this.list = res.data.data.films
                    this.total = res.data.data.total
                })
                
            })
        }else{
            Dialog.alert({
                title: '提示',
                message: '未定位城市',
            })
            .then(() => {
               
                this.$router.push({name:'city'})
            })
            
        }
    }
}
</script>

<style lang="scss" >
.banner{
    width:100%;
    position: relative;
    height:180px;
    .m-img{
        width:100%;
        height:180px;
    }
}
.cityinfo{
    position: absolute;
    top:20px;
    left:20px;
    border:1px solid #ccc;
    background: rgba(0,0,0,0.4);
    color:#fff;
    border-radius: 20px;
    width:70px;
    height:28px;
    line-height: 28px;
    z-index:1000;
    text-align: center;
    font-size:14px;
    display: flex;
    justify-content: center;
    align-items: center;
    span{
        margin-right:4px;
    }
}

.movie{
     .van-tab--active{
        .van-tab__text{
            color:#ff5f16;
        }
    }
    .van-tabs__line{
        background-color: #ff5f16;
    }
    .van-tabs{
        z-index:400;
    } 
}
</style>

